<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div id="head">
        <div id="head1">
            <p>FPA性格色彩</p>
            <p>你的性格色彩，你的性格特征</p>
        </div>
    </div>
    <div id="nav">最近30天测试：410313人</div>
    <!-- 选项 -->
    <div id="options">
        <!-- 进度条 开始 -->
        <div>
            <span id="curr">01</span>
            <span>/30</span>
        </div>
        <!-- 进度条 结束-->
        <div>
            <div></div>
        </div>
        <!-- 存放题目的 -->
        
         <div >
                <!-- 题目开始 -->
               <span class="tm">
                <p>
                    <a>1</a>、我的人生观是
                </p>
                <!-- 题目结束 -->
                <!-- 选项开始 -->
                <div>
                    <!-- <input type="hidden" value="1" name="subid"/> -->
                    <span style="display: none;" name="subid">1</span>
                    <ul class="xx">
                        
                        <li>A 人生的体验越多越好，所以想法很多，有可能就应该多尝试。</li>
                        <li>B 深度比宽度更重要，目标要谨慎，一旦确定就坚持到底</li>
                        <li>C 人生必须有所成。</li>
                        <li>D 没必要太辛苦，好好活着就行</li>
                    </ul>
                    <input type="button" value="上一题" onclick="prevSub()"/>
                    <input type="button" value="下一题" onclick="nextSub()"/>
                </div>
                <!-- 选项结束 -->
                </span>
                
                <span class="tm">
                    <p>
                        2、我的人生观是
                    </p>
                    <!-- 题目结束 -->
                    <!-- 选项开始 -->
                    <div>
                        <span style="display: none;" name="subid">2</span>
                        <ul class="xx">
                            <li>A1 人生的体验越多越好，所以想法很多，有可能就应该多尝试。</li>
                            <li>B2 深度比宽度更重要，目标要谨慎，一旦确定就坚持到底</li>
                            <li>C3 人生必须有所成。</li>
                            <li>D4 没必要太辛苦，好好活着就行</li>
                        </ul>
                        <input type="button" value="上一题" onclick="prevSub()"/>
                        <input type="button" value="下一题" onclick="nextSub()"/>
                    </div>
                    <!-- 选项结束 -->
                </span>
                <span class="tm">
                    <p>
                        3、我的人生观是
                    </p>
                    <!-- 题目结束 -->
                    <!-- 选项开始 -->
                    <div>
                        <span style="display: none;" name="subid">3</span>
                        <ul class="xx">
                            <li>A31 人生的体验越多越好，所以想法很多，有可能就应该多尝试。</li>
                            <li>B32 深度比宽度更重要，目标要谨慎，一旦确定就坚持到底</li>
                            <li>C33 人生必须有所成。</li>
                            <li>D34 没必要太辛苦，好好活着就行</li>
                        </ul>
                        <input type="button" value="上一题" onclick="prevSub()"/>
                        <input type="button" value="下一题" onclick="nextSub()"/>
                    </div>
                    <!-- 选项结束 -->
                </span>
                <span class="tm">
                    <p>
                        4、我的人生观是
                    </p>
                    <!-- 题目结束 -->
                    <!-- 选项开始 -->
                    <div>
                        <span style="display: none;" name="subid">3</span>
                        <ul class="xx">
                            <li>A41 人生的体验越多越好，所以想法很多，有可能就应该多尝试。</li>
                            <li>B42 深度比宽度更重要，目标要谨慎，一旦确定就坚持到底</li>
                            <li>C43 人生必须有所成。</li>
                            <li>D44 没必要太辛苦，好好活着就行</li>
                        </ul>
                        <input type="button" value="上一题" onclick="prevSub()"/>
                        <input type="button" value="下一题" onclick="nextSub()"/>
                    </div>
                    <!-- 选项结束 -->
                </span>
                <span class="tm">
                    <p>
                        5、我的人生观是
                    </p>
                    <!-- 题目结束 -->
                    <!-- 选项开始 -->
                    <div>
                        <span style="display: none;" name="subid">3</span>
                        <ul class="xx">
                            <li>A51 人生的体验越多越好，所以想法很多，有可能就应该多尝试。</li>
                            <li>B52 深度比宽度更重要，目标要谨慎，一旦确定就坚持到底</li>
                            <li>C53 人生必须有所成。</li>
                            <li>D54 没必要太辛苦，好好活着就行</li>
                        </ul>
                        <input type="button" value="上一题" onclick="prevSub()"/>
                        <input type="button" value="下一题" onclick="nextSub()"/>
                    </div>
                    <!-- 选项结束 -->
                </span>
                <span class="tm">
                    <p>
                        6、我的人生观是
                    </p>
                    <!-- 题目结束 -->
                    <!-- 选项开始 -->
                    <div>
                        <span style="display: none;" name="subid">3</span>
                        <ul class="xx">
                            <li>A61 人生的体验越多越好，所以想法很多，有可能就应该多尝试。</li>
                            <li>B62 深度比宽度更重要，目标要谨慎，一旦确定就坚持到底</li>
                            <li>C63 人生必须有所成。</li>
                            <li>D64 没必要太辛苦，好好活着就行</li>
                        </ul>
                        <input type="button" value="上一题" onclick="prevSub()"/>
                        <input type="button" value="下一题" onclick="nextSub()"/>
                    </div>
                    <!-- 选项结束 -->
                </span>
                <span class="tm">
                    <p>
                        7、我的人生观是
                    </p>
                    <!-- 题目结束 -->
                    <!-- 选项开始 -->
                    <div>
                        <span style="display: none;" name="subid">3</span>
                        <ul class="xx">
                            <li>A71 人生的体验越多越好，所以想法很多，有可能就应该多尝试。</li>
                            <li>B72 深度比宽度更重要，目标要谨慎，一旦确定就坚持到底</li>
                            <li>C73 人生必须有所成。</li>
                            <li>D74 没必要太辛苦，好好活着就行</li>
                        </ul>
                        <input type="button" value="上一题" onclick="prevSub()"/>
                        <input type="button" value="下一题" onclick="nextSub()"/>
                    </div>
                    <!-- 选项结束 -->
                </span>
                <span class="tm">
                    <p>
                        8、我的人生观是
                    </p>
                    <!-- 题目结束 -->
                    <!-- 选项开始 -->
                    <div>
                        <span style="display: none;" name="subid">3</span>
                        <ul class="xx">
                            <li>A81 人生的体验越多越好，所以想法很多，有可能就应该多尝试。</li>
                            <li>B82 深度比宽度更重要，目标要谨慎，一旦确定就坚持到底</li>
                            <li>C83 人生必须有所成。</li>
                            <li>D84 没必要太辛苦，好好活着就行</li>
                        </ul>
                        <input type="button" value="上一题" onclick="prevSub()"/>
                        <input type="button" value="下一题" onclick="nextSub()"/>
                    </div>
                    <!-- 选项结束 -->
                </span>
         </div>
        
        
    </div>
    <div id="bottom">
        <div>
            <p>【完成测试，您将获得】</p>
            <div>
                <ul>
                    <li>测试介绍</li>
                    <li>四种性格简介</li>
                    <li>你的性格色彩测试结果</li>
                    <li>性格特点</li>
                    <li>行为特点</li>
                    <li>如何与之相处</li>
                </ul>
            </div>
            <p>
                南京未莱迪电子商务有限公司龙湾分公司
            </p>
        </div>
    </div>
    
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.min.js"></script>
    <script>
        var i =0;
        var j=1;// 进度条上的第几题
        var chackOption=[];
        
        function changeStyle(){
            $(".tm").css("display","none");
            $(".tm")[i].style.display="block";        
        }
        
        $(function(){
            changeStyle();
            // 当点击选项的时候自动给切换到下一个题目
            $(".xx").children("li").click(function(){
                
                
                changeJinduTiao("+");
                // 将对那个的数据存到集合里面
                var checkobj={};
                // 获取当前的兄弟标签input
                var subid=$(this).parent(".xx").prev().text();
                var answer=$(this).text().substr(0, 1);
                 checkobj["subid"]=subid;
                 checkobj["answer"]=answer;
                 //alert(subid+"---"+answer+"===="+JSON.stringify(checkobj));
                 chackOption[i]=checkobj;
                 $(this).css("background-color","orange");
                 localStorage.setItem("checkdata",JSON.stringify(chackOption));
                 // 方便看清选项
                 i++;
                 j++;
                changeStyle();
            })
        })
        
        /**
         * 更改进度条
         */
        function changeJinduTiao(fh){
            if(j<10){
                $("#curr").html("0"+j);
            }else{
                $("#curr").html(j);
            }
            var oldwidth=$("#options div:nth-of-type(2) div").css("width").slice(0,-2);
            var newwidth=0;
            if(fh=='+'){
                newwidth=Number(oldwidth)+20
            }else{
                newwidth=Number(oldwidth)-20
            }
            
            $("#options div:nth-of-type(2) div").css("width",newwidth+"px");
        }
        
        /*
        *上一题的按钮
         */
        function prevSub(){
            
            i--;
            j--;
            changeJinduTiao("-");
            
            changeStyle();
            changeBgColor();
            
        }
        /**
         * 下一题的按钮
         */
        
        function nextSub(){
            i++;
            j++;
            changeJinduTiao("+");
            changeStyle();
            // 更改背景颜色
            changeBgColor();      
        }
        
        /**
         * 更改背景颜色
         */
        function changeBgColor(){
            // 如果之前已经做过这个题目了就展示之前的结果  否则直接就展示下一题
            //集合中的数据拿出来并选中  之前已经选中的那个li
            var allData=JSON.parse(localStorage.getItem("checkdata"));
            var checkData=allData[i];
            if(checkData!='undefined'&&checkData!=null&&checkData!=''){
                var answer=checkData.answer;
                var subid=checkData.subid;
                // 找到答案为answer的选中
                
                // 找到span的text为subid的然后显示
                var aaa=$($(".tm")[i]).children().find(".xx").children();
                aaa.each(item=>{
                    $(aaa[item]).css("background-color","");
                    // item是一个数字
                    var content=aaa[item].innerText;
                
                    var answer1=content.substr(0, 1);
                    
                    if(answer==answer1){
                        $(aaa[item]).css("background-color","orange");
                    }
                })
            }
        }
        
    </script>
</body>
</html> 
